<script setup lang="ts">
import type {
  ActionType,
  ViewCalendarItemProps,
  ViewCalendarScope,
} from './type'
import DateClass from './utils/DateClass'

const props = withDefaults(
  defineProps<ViewCalendarItemProps>(),
  {
    time: formatTime(Date.now(), 'YYYY-MM-DD'),
  },
)
// ------------------use------------------
// #region
const emits = defineEmits<{
  changeTargetDate: [data: ViewCalendarScope]
  changeMonth: [
    action: ActionType,
    data: ViewCalendarScope,
  ]
}>()
const { proxy } = useCurrentInstance()
// #endregion
// ------------------静态变量------------------
// #region

// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region

// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region

// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
function isCurrentMonth(time: string) {
  const months = time.split('-')[1]
  return DateClass.getCurrent()[1] === Number(months)
}
function changeTargetDate(time: ViewCalendarScope) {
  emits('changeTargetDate', time)
  const curMonth = time.date
    .split('-')
    .slice(0, 2)
    .join('-')
  const selMonth = props.time
    .split('-')
    .slice(0, 2)
    .join('-')
  if (
    new Date(curMonth).getTime()
      === new Date(selMonth).getTime()
  ) {
    return
  }

  const selStamp = new Date(time.date).getTime()
  const curStamp = new Date(props.time).getTime()
  const action: ActionType
    = selStamp > curStamp ? 'next' : 'prev'
  emits('changeMonth', action, time)
}
function handleClick(time: ViewCalendarScope, e: MouseEvent) {
  changeTargetDate(time);
  (proxy?.$parent?.$props as any).span
  && handleSpanModal(e)
}
function handleSpanModal(e: MouseEvent) {
  if (
    !props.data.isCurrent
    || !(proxy?.$parent?.$props as any)?.dateBadge?.[
      props.data.date
    ]
  ) {
    props.setCurrentSpanCell()
    return
  }
  props.setCurrentSpanCell(e, props.data)
}
// #endregion
</script>

<template>
  <div
    class="view-calendar-item"
    :class="[
      {
        'is-current': data.isCurrent,
        'is-holidays': data.isHolidays,
        'is-works': data.isWorks,
        'is-week': data.isWeek,
        'is-selected': data.date === props.time,
        'is-current-month': isCurrentMonth(data.date),
        'badge': !!($parent?.$props as any).dateBadge[data.date],
      },
    ]"
    :badge="($parent?.$props as any).dateBadge[data.date] ?? ''"
    @click="e => handleClick(data, e)"
  >
    <slot>
      <div
        v-if="data.isWorks"
        class="view-calendar-item__text"
      >
        调
      </div>
      <div
        v-if="!data.isWorks && data.isHolidays"
        class="view-calendar-item__text"
      >
        休
      </div>
      <span class="view-calendar-item__title">
        {{ data.title }}
      </span>
      <span class="view-calendar-item__lunar">
        {{ data.lunarsChina }}
      </span>
    </slot>
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
